<template>
	<view class="adduser">
		<u-navbar left-icon-color="#fff" :placeholder="true" :bgColor="bgColor" :autoBack="true">
			<view class="navtitle" slot="center">
				添加好友
			</view>
		</u-navbar>
		<view class="cont-input">
			<u--input placeholder="请输入对方账号" customStyle="background-color: #232526; padding: 20rpx;"
				prefixIconStyle="color: #fff;" @confirm="gosearch" @input="input" prefixIcon="search" color="#fff" border="none"
				v-model="value"></u--input>
			<view class="chat-list" v-if="user!=''">
				<view class="chat-left">
					<u--image :showLoading="true" radius="10" :src="user.u_img"
						loadingIcon="/static/chat/logo.png" errorIcon="/static/chat/logo.png" width="55px"
						height="55px"></u--image>
				</view>
				<view class="chat-right">
					<view class="right-box">
						<view class="title">{{user.user}}</view>
						<view class="cont">我是{{user.user}}</view>
					</view>
					<view style="color: #fff;" v-if="user.id == info.id">
						<u-button type="primary" color="#5FBC94" class="btn" text="添加好友" disabled></u-button>
					</view>
					<view v-else>
						<u-button type="primary" color="#5FBC94" class="btn" text="添加好友" @click="adduser(user.id)"></u-button>
					</view>
				</view>
			</view>
			<view v-else>
				<u-empty mode="search" :marginTop="30" icon="http://cdn.uviewui.com/uview/empty/search.png">
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: 'rgba(0,0,0,0.0)',
				value: '',
				user:'',
				info:{}
			}
		},
		onLoad() {
			this.getuser()
		},
		methods:{
			input(e){
				if(e == ''){
					this.user = ''
				}
			},
			getuser(){
				let params = {
				
				}
				this.$Request({
					method: 'POST',
					url: '/api/Personal/myIndex',
					data: params
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data.user
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			
			adduser(id){
				this.$Request({
					method: 'POST',
					url: '/api/rong/addFriends',
					data: {
						member_id: id,
						phone: this.value
					}
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title:'申请已发送！',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			gosearch(){
				if(this.value == ''){
					uni.showToast({
						title:'请输入对方账号！',
						icon:'none'
					})
					return
				}
				this.$Request({
					method: 'POST',
					url: '/api/rong/addSearch',
					data: {
						phone: this.value,
					}
				}).then(res => {
					if (res.code == 1) {
						console.log(res)
						this.user = res.data
					}else{
						this.user = ''
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #17191A;
	}
</style>
<style scoped lang="scss">
	.adduser {
		.navtitle {
			color: #fff;
		}

		.cont-input {
			padding: 30rpx 20rpx;
			.btn-box{
				margin-top: 60rpx;
			}
			.chat-list {
				display: flex;
				align-items: center;
				padding: 30rpx;
				margin-top: 30rpx;
				.chat-left {
					width: 20%;
				}
			
				.chat-right {
					width: 80%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.right-box {
			
						.title {
							font-size: 28rpx;
							color: #fff;
						}
			
						.cont {
							font-size: 24rpx;
							color: #d6d6d6;
							margin-top: 20rpx;
						}
					}
					.btn{
						width: 90px;
						height: 35px;
					}
				}
			}
		}
	}
</style>